﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Minimum app width</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.2.0/css/ui-light.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

    <link href="minimum.css" rel="stylesheet" />
    <script src="minimum.js"></script>
</head>
<body>
    <div class="minimum fragment">
        <header aria-label="Header content" role="banner">
            <button data-win-control="WinJS.UI.BackButton"></button>
            <h1 class="titlearea win-type-ellipsis">
                <span class="pagetitle">Welcome to minimum</span>
            </h1>
        </header>
        <section aria-label="Main content" role="main">
            <div class="explanation">
                Below are some simple div elements sized at 320px and 500px. To see the how the app reacts when resized, launch another Windows Store app to the right of codeShow and then start shrinking codeShow and see how it reacts. Then launch a third Windows Store app to the right of the other two (if you can!) and see what happens.
            </div>
            <div class="measuringsticks">
                <div>320px</div>
                <div>500px</div>
            </div>
        </section>
    </div>
</body>
</html>
